<template>
  <div>
    <ul>
      <transition-group appear name="todo">
        <li v-for="todo in todos" :key="todo.id">
          <MyItem :todo="todo" :key="todo.id" />
        </li>
      </transition-group>
    </ul>
  </div>
</template>

<script>
import MyItem from "./MyItem.vue";

export default {
  name: "MyList",
  components: {
    MyItem,
  },
  props: ["todos"],
  methods: {},
};
</script>

<style>
.todo-enter-active {
  animation: sgg 0.5s linear;
}
.todo-leave-active {
  animation: sgg 0.5s reverse;
}
@keyframes sgg {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>